<style>
    .table-header{
        margin: 10px 0;
    }
</style>

<template>
    <div class="table">
        <div class="table-header">
             <Row>
                <Col span="12">
                    <Button type="success" icon="android-add" @click="showAdd = true">添加关卡</Button>
                </Col>
                <!-- <Col span="12">
                    <div style="float:right;"> 
                        <Input v-model="keywords" placeholder="请输入..." style="width: 150px"></Input>
                        <Button type="ghost" icon="ios-search">搜索</Button>
                    </div>
                </Col> -->
            </Row>
        </div>
        <Table border :columns="columns" :data="list"></Table>
        <Modal v-model="showAdd" title="添加关卡" :mask-closable="false">
            <add ref="addModal" @closeAdd="closeAddModal"></add>
            <div slot="footer"></div>
        </Modal>
        <Modal v-model="showEdit" title="编辑关卡设置" :mask-closable="false">
            <edit ref="editModal" @closeEdit="closeEditModal"></edit>
            <div slot="footer"></div>
        </Modal>
        <Modal v-model="showDetail" title="关卡设置详情">
            <detail ref="detailModal"></detail>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>
<script>
import http from '../../../libs/http';
import edit from './edit';
import detail from './detail';
import add from './add';
export default {
    components: {
        edit,
        detail,
        add
    },
    data () {
        return {
            showAdd: false,
            showEdit: false,
            showDetail: false,
            editid: '',
            detail_id:'',
            list: [],
            columns: [
                {
                    title: 'ID',
                    key: 'id',
                    align: 'center'
                },
                {
                    title: '关卡',
                    key: 'level',
                    align: 'center'
                },
                {
                    title: '关卡名称',
                    key: 'name',
                    align: 'center'
                },
                /* {
                    title: '解锁星数要求',
                    key: 'stars',
                    align: 'center'
                }, */
                {
                    title: '关卡题目数',
                    key: 'num',
                    align: 'center'
                },
                {
                    title: '通过可得学分',
                    key: 'points',
                    align: 'center'
                },
                {
                    title: '创建时间',
                    key: 'create_time',
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    width: '300px',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '10px'
                                },
                                on: {
                                    click: () => {
                                        this.detail(params.row.id)
                                    }
                                }
                            }, '查看详细'),
                            h('Button',{
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '10px'
                                },
                                on: {
                                    click: () => {
                                        this.edit(params.row.id)
                                    }
                                }
                            }, '编辑'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.remove(params.row.id)
                                    }
                                }
                            }, '删除')
                        ])
                    }
                }
            ]
        }
    },
    methods: {
        getList () {
            var that = this;
            this.apiGet('admin/game/config/index').then((res) => {
                if (res.code != 200) {
                    this.handleError(res);
                } else {
                    that.list = res.data;
                }
            });
        },
        detail (id) {
            this.showDetail = true;
            this.$refs.detailModal.getConfig(id);
        },
        edit (id) {
            this.showEdit = true;
            this.$refs.editModal.getConfig(id);
        },
        closeEditModal () {
            this.showEdit = false;
            this.getList();
        },
        remove(id) {
            this.$Modal.confirm({
                    width: "200",
                    content: '确认是否删除',
                    onOk: () => {
                        this.delete(id);
                    }
                });
        },
        delete(id) {
            var url = 'admin/game/config/delete/';
            this.apiDelete(url,id).then((res) => {
                if (res.code != 200) {
                    this.handleError(res);
                } else {
                    this.getList();
                    this.$Message.success(res.msg);
                }
            });
        },
        closeAddModal () {
            this.showAdd = false;
            this.getList();
        }
    },
    created () {
        this.getList();
    },
    mixins: [http]
}
</script>